<mat-card class="page-title">
    <div class="btn-toolbar float-left" role="toolbar">
        <button mat-icon-button (click)="globalService.toggleSideNav()">
            <mat-icon color="primary">menu</mat-icon>
        </button>
    </div>
    <span>用户管理</span>
    <div class="btn-toolbar float-right" role="toolbar">
        <button mat-icon-button (click)="createUser()" matTooltip="创建新用户">
            <mat-icon color="primary">person_add</mat-icon>
        </button>
        <span>&nbsp;&nbsp;</span>
        <button mat-icon-button (click)="refresh(true)" matTooltip="刷新">
            <mat-icon color="primary">refresh</mat-icon>
        </button>
    </div>
</mat-card>

<mat-card style="margin-bottom: 50px">
    <input name="search" type="text" class="form-control" placeholder="搜索" [(ngModel)]="filter" style="width:200px">
    <br>
    <div class="table-responsive" *ngIf="users">
        <table class="table table-striped">
            <thead>
            <tr>
                <th><span>编号</span> <span class="fa fa-sort"></span></th>
                <th><span>用户帐号</span> <span class="fa fa-sort"></span></th>
                <th><span>姓名</span> <span class="fa fa-sort"></span></th>
                <th><span>电子邮箱</span> <span class="fa fa-sort"></span></th>
                <th><span>电话号码</span> <span class="fa fa-sort"></span></th>
                <th><span>激活?</span></th>
                <th><span>角色</span></th>
                <th width="60px">操作</th>
            </tr>
            </thead>
            <tbody *ngIf="users">
            <tr *ngFor="let user of users; trackBy: trackIdentity">
                <td><a (click)="viewUser(user.login)">{{user.id}}</a></td>
                <td><a (click)="viewUser(user.login)">{{user.login}}</a></td>
                <td>{{user.fullName}}</td>
                <td>{{user.email}}</td>
                <td>{{user.phone}}</td>
                <td>
                    <mat-chip selected color="warn" (click)="setActive(user, true)" *ngIf="!user.activated">
                        未激活
                    </mat-chip>
                    <mat-chip selected [color]="'success'" (click)="setActive(user, false)" *ngIf="user.activated">
                        已激活
                    </mat-chip>
                </td>
                <td>
                    <mat-chip-list>
                        <mat-chip *ngFor="let authority of user.authorities.sort().slice(0,2)" selected [color]="'info'">
                            {{authority.substr(5)}}
                        </mat-chip>
                        <mat-chip *ngIf="user.authorities.length > 2" selected color="accent">
                            <span matTooltip="{{getOtherRoles(user.authorities.sort())}}">
                                ...
                            </span>
                        </mat-chip>
                    </mat-chip-list>
                </td>
                <td width="60px" align="center">
                    <a [matMenuTriggerFor]="actionMenu" [matMenuTriggerData]="{user: user}">
                        <span class="fa fa-cog icon-inline"></span>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div>
        <mat-paginator #paginator
                       [length]="totalItems"
                       [pageSize]="itemsPerPage"
                       [pageSizeOptions]="pageSizeOptions"
                       (page)="reloadPage($event)"
                       showFirstLastButtons>
        </mat-paginator>
    </div>
</mat-card>

<mat-menu #actionMenu="matMenu" [overlapTrigger]="false">
    <ng-template matMenuContent let-user="user">
        <button mat-menu-item (click)="viewUser(user.login)">
            <span class="fa fa-eye"></span>
            <span>&nbsp;&nbsp;查看</span>
        </button>
        <button mat-menu-item (click)="editUser(user.login)"
                *ngIf="user.login !== 'admin' && user.login !== 'system'">
            <span class="fa fa-pencil"></span>
            <span>&nbsp;&nbsp;编辑</span>
        </button>
        <button mat-menu-item (click)="deleteUser(user.login)"
                *ngIf="currentAccount.login !== user.login && user.login !== 'admin' && user.login !== 'system'">
            <span class="fa fa-remove"></span>
            <span>&nbsp;&nbsp;删除</span>
        </button>
        <button mat-menu-item (click)="resetPassword(user.login)"
                *ngIf="user.login !== 'admin' && user.login !== 'system'">
            <span class="fa fa-key"></span>
            <span>&nbsp;&nbsp;重置密码</span>
        </button>
    </ng-template>
</mat-menu>
